<template>
  <div class="login-alls">
    <div class="login-title">注册</div>
    <div class="login-input">
      <div class="login-input-text">
        <span class="el-icon-user keys"></span>
        <input
          type="text"
          placeholder="请输入5~16位用户名"
          @blur="users"
          v-model="userS"
        />
      </div>
      <div class="login-input-text">
        <span class="el-icon-mobile-phone keys"></span>
        <input type="text" placeholder="请输入手机号" @blur="iphoneb" v-model="iphonE" />
      </div>
      <div class="login-input-text">
        <span class="el-icon-key keys"></span>
        <input
          type="password"
          placeholder="请输入6~16位密码"
          @blur="passw" v-model="passW"
        />
      </div>
      <div class="login-input-text">
        <span class="el-icon-key keys"></span>
        <input
          type="password"
          placeholder="请再次输入密码"
          @blur="passw2"
          v-model="passW2"
        />
      </div>
      <div class="login-btn" @click="register()">注册</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userS: "",
      iphonE: "",
      passW: "",
      passW2: "",
    };
  },
  mounted() {},
  methods: {
    // 用户注册表单验证
    users() {
      let userReg = new RegExp("^[\u4e00-\u9fa5A-Za-z0-9]{5,16}$");
      if (this.userS == "") {
        this.$message({
          message: "用户名不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.userS)) {
        this.$message({
          message: "用户名格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入汉字、英文或数字用户名",
          type: "error",
        });
      }
    },
    // 手机号验证
    iphoneb() {
      let userReg = new RegExp("^1[3-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$");
      if (this.iphonE == "") {
        this.$message({
          message: "手机号不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.iphonE)) {
        this.$message({
          message: "手机号格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入正确格式的手机号",
          type: "error",
        });
      }
    },
    // 注册密码验证
    passw() {
      let userReg = new RegExp("^[a-zA-Z0-9]{6,16}$");
      if (this.passW == "") {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.passW)) {
        this.$message({
          message: "密码格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入正确格式的密码！",
          type: "error",
        });
      }
    },
    // 判断两次密码是否相同
    passw2() {
      if (this.passW !== this.passW2) {
        this.$message({
          message: "两次输入的密码不同！",
          type: "error",
        });
      } else {
        this.$message({
          message: "完美通过，点击注册吧！",
          type: "success",
        });
      }
    },
    // 注册按钮发请求
    register() {
      let userReg1 = new RegExp("^[\u4e00-\u9fa5A-Za-z0-9]{5,16}$");
      let userReg2 = new RegExp("^1[3-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$");
      let userReg3 = new RegExp("^[a-zA-Z0-9]{6,16}$");
     if(this.userS !== "" && userReg1.test(this.userS)&& userReg2.test(this.iphonE)&& userReg3.test(this.passW) && this.passW == this.passW2){
        this.$http.post('/register',{
        uname:this.userS,
        iphone:this.iphonE,
        password:this.passW,
      }).then(res=>{
        // console.log(res);
        this.$alert(res.data.message, "爱心提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if(res.data.code==200){
            this.$router.push('/login/login')
          }
        },
      });
      }).catch(err=>{
        console.log(err);
      })

     }else{
       console.log('no');
     }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-alls {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .login-title {
    width: 100%;
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    margin: 20px 0 0 0;
    color: rgb(0, 0, 0);
  }
  .login-input {
    width: 100%;
    margin: 0px 0px;
    height: auto;
    .login-btn {
      width: 410px;
      height: 50px;
      background: rgb(0, 0, 0);
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 0px auto;
      border-radius: 10px;
    }
    .login-input-text {
      margin: 20px 60px;
      text-align: center;
      width: 460px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      input {
        width: 100%;
        height: 38px;
        border: none;
        margin-left: 15px;
        border-radius: 3px;
        padding: 0 20px;
      }
      .keys {
        font-size: 30px;
      }
    }
  }
}
</style>
